.q-calendar-mini

  .q-calendar-weekly

    &__head-workweek
      border-right: unset
      border-bottom: unset
      max-width: var(--calendar-mini-work-week-width)
      min-width: var(--calendar-mini-work-week-width)

    &__head-weekday
      border: 0 !important
      padding: 0
      font-size: unset
      min-height: 1.5em !important
      min-width: 1.5em !important

    &__week
      min-height: unset

      &--wrapper
        border-bottom: unset

    &__workweek
      border-right: unset
      font-size: 1em
      max-width: var(--calendar-mini-work-week-width)
      min-width: var(--calendar-mini-work-week-width)

    &__day
      display: flex
      justify-content: center
      flex-wrap: wrap
      padding: 0
      border: 0 !important
      margin-top: 1px
      margin-bottom: 1px
      min-height: 1.5em !important

      &--content
        margin-top: 1px
        height: auto

      &-label
        position: relative
        vertical-align: middle
        text-align: center
        top: unset
        left: unset

      &.q-active-date
        color: var(--calendar-active-date-color)

        .q-btn__wrapper:before
          background: var(--calendar-active-date-background)

      &.q-current-day
        color: var(--calendar-mini-current-color) !important
        background: var(--calendar-mini-current-background) !important

        .q-btn__wrapper:before
          border: var(--calendar-border-current)

      &.q-selected
        color: var(--calendar-mini-selected-color)
        background: var(--calendar-mini-selected-background) !important

        .q-calendar-weekly__day-label .q-btn__wrapper:before
          color: var(--calendar-mini-selected-label-color) !important
          background: var(--calendar-mini-selected-label-background) !important

      &.q-disabled-day
        color: var(--calendar-disabled-date-color) !important
        background: var(--calendar-disabled-date-background) !important

      &.q-outside
        color: var(--calendar-outside-color) !important
        background: var(--calendar-outside-background)

      &.q-range-first,
      &.q-range-last
        color: var(--calendar-mini-range-firstlast-color)
        background: var(--calendar-mini-range-firstlast-background) !important

        .q-calendar-weekly__day-label .q-btn__wrapper:before
          color: var(--calendar-mini-range-firstlast-label-color) !important
          background: var(--calendar-mini-range-firstlast-label-background) !important

      &.q-range
        color: unset
        background: unset

        &.q-range-hover
          color: var(--calendar-mini-range-hover-color)

      &.q-range-first,
      &.q-range-last,
      &.q-range
  
        &:before
          content: ''
          display: block
          position: absolute
          width: 100%
          top: 0
          right: 0
          bottom: 0
          left: 0
          background: var(--calendar-mini-range-connector-color)

        &.q-range-hover
          &:before
            content: ''
            display: block
            position: absolute
            width: 100%
            top: 0
            right: 0
            bottom: 0
            left: 0
            color: var(--calendar-color)
            background: var(--calendar-background)
            border-top: var(--calendar-mini-range-connector-hover-border)
            border-bottom: var(--calendar-mini-range-connector-hover-border)

      &.q-range-first,
      &.q-range-last
        .q-calendar-weekly__day-label .q-btn__wrapper:before
          color: var(--calendar-mini-range-firstlast-label-color) !important
          background: var(--calendar-mini-range-firstlast-label-background) !important
          border-radius: 50%

      &.q-range-first
        &:before
          width: 50%
          left: 50%

        &.q-range-hover
          &:before
            width: 50%
            left: 50%

      &.q-range-last
        &:before
          width: 50%
          right: auto

        // when first and last are same day
        &.q-range-first
          &:before
            width: 0

        &.q-range-hover
          &:before
            width: 50%
            right: auto

          // when first and last are same day
          &.q-range-first
            &.q-range-hover
              &:before
                width: 0

        // fix issue with seeing :before on an in-range disabled button
        &.q-range-first,
        &.q-range-last
          .q-btn
            opacity: 1 !important

      &.q-calendar-weekly__day--droppable
        border: var(--calendar-border-droppable) !important

  .q-day-event:not(.q-day-event-void)
    &:after
      content: ''
      width: 0.6em
      height: 0.4em
      border-radius: 50%
      left: 0
      right: 0
      margin: auto
      background: var(--calendar-selected-background)

  .q-calendar-weekly__week
    border-bottom: unset
    max-width: 100%

.q-dark div,
.body--dark div,
.q-calendar--dark

  .q-calendar-mini

    &.q-calendar-weekly
      color: var(--calendar-color-dark)
      background: var(--calendar-background-dark)

    .q-calendar-weekly

      &__head-workweek
        border-right: unset
        border-bottom: unset

      &__workweek
        border-right: unset

      &__week--wrapper
        border-bottom: unset

      &__day
        color: var(--calendar-color-dark)
        background: var(--calendar-background-dark)

        &.q-active-date
          color: var(--calendar-active-date-color-dark)

          .q-btn__wrapper:before
            background: var(--calendar-active-date-background-dark)

        &.q-current-day
          .q-btn__wrapper:before
            border: var(--calendar-border-current-dark) !important

        &.q-selected
          color: var(--calendar-mini-selected-color-dark)
          background: var(--calendar-mini-selected-background-dark)

          .q-current-day
            .q-btn__wrapper:before
              border: var(--calendar-border-current)

        &.q-disabled-day
          color: var(--calendar-disabled-date-color-dark) !important
          background: var(--calendar-disabled-date-background-dark) !important

        &.q-outside
          color: var(--calendar-outside-color-dark) !important
          background: var(--calendar-outside-background-dark) !important

        &.q-range
          color: var(--calendar-mini-range-color-dark)
          background: var(--calendar-mini-range-background-dark) !important

          &.q-range-hover
            color: var(--calendar-mini-range-hover-color-dark)

        &.q-range-first,
        &.q-range-last,
        &.q-range
    
          &:before
            background: var(--calendar-mini-range-connector-color-dark)

          &.q-range-hover
            &:before
              color: var(--calendar-color-dark)
              background: var(--calendar-background-dark)
              border-top: var(--calendar-mini-range-connector-hover-border-dark)
              border-bottom: var(--calendar-mini-range-connector-hover-border-dark)

        // fix issue with seeing :before on an in-range disabled button
        &.q-range-first,
        &.q-range-last
          .q-btn
            opacity: 1 !important


        &.q-calendar-weekly__day--droppable
          border: var(--calendar-border-droppable-dark) !important

.q-calendar-mini
  .q-day-event
    margin-top: 0.0em